<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <!-- 引入初始化css样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入轮播图插件css -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <!-- 引入index.css -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./img/字体图标/iconfont.css">

</head>

<body>
    <! -- 页头 -->
    <div id="top" class="banxin">
        <!-- logo -->
        <div class="logo">
            <img src="./img/logo.png" alt="">
            <div>
                <h3>熊猫优选</h3>
                <span>XIONG MAO YOU XUAN</span>
            </div>
        </div>
        <!-- 搜索栏 -->
        <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索商品，发现更多优惠">
            <a href="#">搜索</a>
        </div>
        <!-- 图标 -->
        <div class="icon">
            <ul>
                <li>
                    <img src="./img/baoyou.png" alt="">
                    <span>全程包邮</span>
                </li>
                <li>
                    <img src="./img/tuihuan.png" alt="">
                    <span>七天退换</span>
                </li>
                <li>
                    <img src="./img/pinzhi.png" alt="">
                    <span>品质保证</span>
                </li>
            </ul>

        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <ul class="banxin">
            <li class="default">首页</li>
            <li>九块九包邮</li>
            <li>超值大额券</li>
            <li>降温急救穿搭</li>
        </ul>

    </div>
    <!-- 页中 -->
    <div id="center" class="banxin">
        <div class="fl"></div>
        <div class="zhong">
            <!-- 引入轮播图插件js -->
            <script src="./js/swiper-bundle.min.js"></script>
            <div class="zhong-top">
                <div class="swiper-container">
                    <div class="swiper-wrapper">

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

                <div class="jiukuaijiu">
                    <h3>九块九包邮</h3>
                    <div>保你不吃亏</div>
                    <img src="./img/专题图.gif" alt="">
                </div>
            </div>

            <div class="zhong-button">
                <div class="button-fl">
                    <h3>降温急救穿搭</h3>
                    <p>速来抢购</p>
                    <span>Go</span>
                    <img src="./img/zhongxia1.png" alt="">
                </div>
                <div class="button-fc">
                    <h3>超值大额券</h3>
                    <p>优惠直击低价</p>
                    <span>Go</span>
                    <img src="./img/zhongxia2.png" alt="">
                </div>
                <a class="button-fr" href="#">
                    <p>扫码下载APP</p>
                    <p>发现更多惊喜</p>
                    <img src="./img/zhongxia3.png" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 内容-导航 -->
    <div id="contentnav" class="banxin">
        <h3>小编精选</h3>
        <p>每天更新</p>
    </div>

    <!-- 内容 -->
    <div id="content" class="banxin">

    </div>

    <!-- 加载更多按钮 -->
    <div id="button" class="banxin">
        查看更多
    </div>

    <!-- 页脚 -->
    <div id="botton">
        <div class="banxin">
            <img src="./img/logo2.png" alt="">
            <h3>熊猫优选</h3>
            <p>年轻人网购首选 购物领券更省钱</p>
            <a href="#"><span> | </span> 下载app</a>
        </div>
    </div>

    <!-- 返回顶部按钮 -->
    <div class="plug-in">
        <span class="iconfont icon-xiangshang
        "></span> <br> 顶部
    </div>


    <!-- jq引入 -->
    <script src="./js/jquery-3.6.0.js"></script>
    <!-- 引入模板引擎 -->
    <script src="./js/template-web.js"></script>
    <!-- 分类模板字符串 -->
    <script id="user" type="text/html">
        <ul>
            {{each lic}}
            <li>
                <img src="{{$value.img}}" alt=" ">
                <div>
                    <a href="# ">{{$value.name1}}</a><a href="# ">{{$value.name2}}</a>
                </div>
            </li>
            {{ /each }}
        </ul>
    </script>
    <!-- 轮播图字符串模板 -->
    <script id="see" type="text/html">
        {{each list}}
        <div class="swiper-slide">
            <img src="{{$value.imageUrl}}" alt="">
        </div>
        {{ /each }}
    </script>
    <!-- 商品字符串模板 -->
    <script id="ser" type="text/html">
        <ul>
            {{each list}}
            <li onclick="onpr({{$value.id}})">
                <img src="{{$value.image}}" alt="">
                <p>{{$value.title}}</p>
                <span class="sb">{{$value.platform == 1?'淘宝':'天猫' }}</span>
                <span class="by">包邮</span>
                <div>
                    <h3>￥</h3>
                    <h1>{{$value.price}}</h1>
                    <h2>{{$value.saleNum}}人已购买</h2>
                </div>
                <span class="quan">{{$value.couponValue}}</span>
            </li>
            {{ /each }}
        </ul>
    </script>
    <!-- 分类表-->
    <script>
        let data = {
            lic: [{
                name1: '女装',
                name2: '/女鞋',
                img: './img/分类图标/女装.png'
            }, {
                name1: '男装',
                name2: '/男鞋',
                img: './img/分类图标/男装.png'
            }, {
                name1: '美妆',
                name2: '/个护',
                img: './img/分类图标/美妆.png'
            }, {
                name1: '配饰',
                name2: '/箱包',
                img: './img/分类图标/配饰.png'
            }, {
                name1: '零食/王国',
                img: './img/分类图标/零食.png'
            }, {
                name1: '母婴/用品',
                img: './img/分类图标/母婴.png'
            }, {
                name1: '手机',
                name2: '/数码',
                img: './img/分类图标/手机.png'
            }, {
                name1: '内衣/袜子',
                img: './img/分类图标/内衣.png'
            }, {
                name1: '文娱',
                name2: '/家居',
                img: './img/分类图标/文娱.png'
            }]
        }
        let html = template('user', data)
        document.querySelector('.fl').innerHTML = html
    </script>
    <!-- 引入index.js -->
    <script src="./js/index.js"></script>
</body>

</html>